<template>
  <Section width="100%">
    <GapedRow width="100%">
      <el-card class="stat-card">
        <div class="stat-title">
          <el-icon><Document /></el-icon>
          <span>今日总日志</span>
        </div>
        <div class="stat-value">{{ totalLogs }}</div>
        <div class="stat-detail">
          较昨日
          <span :class="totalLogsIncrease >= 0 ? 'text-success' : 'text-danger'"
            >{{ totalLogsIncrease >= 0 ? '+' : ''
            }}{{ totalLogsIncrease }}</span
          >
        </div>
      </el-card>

      <el-card class="stat-card">
        <div class="stat-title">
          <el-icon><Warning /></el-icon>
          <span>今日异常日志</span>
        </div>
        <div class="stat-value text-danger">{{ errorLogs }}</div>
        <div class="stat-detail">
          占比 <span class="text-danger">{{ errorLogsPercentage }}</span>
        </div>
      </el-card>

      <el-card class="stat-card">
        <div class="stat-title">
          <el-icon><Menu /></el-icon>
          <span>日志类型分布(Top3)</span>
        </div>
        <div>
          <div
            v-for="(logType, index) in top3LogTypes"
            :key="index"
            class="d-flex justify-content-between mb-1"
          >
            <span class="text-gray">{{ logType.log_type }}</span>
            <span class="fw-bold">{{ logType.count }}</span>
          </div>
        </div>
      </el-card>

      <el-card class="stat-card">
        <div class="stat-title">
          <el-icon><Connection /></el-icon>
          <span>活跃源IP</span>
        </div>
        <div class="stat-value text-success">{{ activeIPs }}</div>
        <div class="stat-detail">
          较昨日
          <span :class="activeIPsIncrease >= 0 ? 'text-success' : 'text-danger'"
            >{{ activeIPsIncrease >= 0 ? '+' : ''
            }}{{ activeIPsIncrease }}</span
          >
        </div>
      </el-card>
    </GapedRow>
  </Section>
</template>

<script setup lang="ts">
import { Document, Warning, Menu, Connection } from '@element-plus/icons-vue'
import { ref, computed } from 'vue'
import useApi from '@/core/apiStore'
import { formatPercent } from '@/utils'
import { Section, GapedRow } from '@/core/components'
import { take } from 'lodash'

const apiStore = useApi()

// 定义统计数据的接口
interface Stats {
  totalLogs: number
  totalLogsIncrease: number
  errorLogs: number
  errorLogsPercentage: number
  logTypes: {
    ACL: number
    IPS: number
    RIS_LOG: number
  }
  activeIPs: number
  activeIPsIncrease: number
}

const totalLogs = computed(() => {
  return apiStore.apiStates.rawCountAll.data?.data.count
})
const totalLogsIncrease = computed(() => {
  const todayTotal = apiStore.apiStates.todayTotal.data?.data.today_total
  const yesterdayTotal =
    apiStore.apiStates.todayTotal.data?.data.yesterday_total

  return yesterdayTotal - todayTotal
})

const errorLogs = computed(() => {
  return apiStore.apiStates.todayTotal.data?.data.today_error
})
const errorLogsPercentage = computed(() => {
  const errorLogs = apiStore.apiStates.todayTotal.data?.data.today_error
  const totalLogs = apiStore.apiStates.todayTotal.data?.data.today_total

  return totalLogs !== 0 ? formatPercent(errorLogs / totalLogs) : 'None'
})

const activeIPs = computed(() => {
  return apiStore.apiStates.activeSourceIps.data?.data.today_unique_ips
})
const activeIPsIncrease = computed(() => {
  const activeIps =
    apiStore.apiStates.activeSourceIps.data?.data.today_unique_ips
  const yesterdayIps =
    apiStore.apiStates.activeSourceIps.data?.data.yesterday_unique_ips

  return yesterdayIps - activeIps
})

const top3LogTypes = computed(() => {
  const result = apiStore.apiStates.typeDistribution.data?.data || []
  const { distributions = [] } = result
  return take(distributions, 3)
})
</script>

<style lang="scss" scoped>
.stat-card {
  flex: 1;
  height: 124px;
  padding: 1.25rem;

  :deep(.el-card__body) {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 !important;
  }
}
.stat-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;

  .el-icon {
    margin-right: 0.5rem;
    color: var(--primary-color);
    font-size: 1rem;
  }
}

.stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--primary-color);
  line-height: 1.2;

  &.text-danger {
    color: var(--danger-color);
  }

  &.text-success {
    color: var(--success-color);
  }
}

.stat-detail {
  font-size: 0.9rem;
  color: var(--gray-color);
  margin-top: 0.5rem;
}

.text-success {
  color: var(--success-color);
}

.text-danger {
  color: var(--danger-color);
}

.text-gray {
  color: var(--gray-color);
}

.fw-bold {
  font-weight: bold;
}

.d-flex {
  display: flex;
}

.justify-content-between {
  justify-content: space-between;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

@media (max-width: 768px) {
  .stat-value {
    font-size: 1.5rem;
  }
}
</style>
